<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta name="wap-font-scale" content="no">
<meta name="format-detection" content="telephone=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="blank">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script type="text/javascript" src="http://m.the3ctv.com/wap/jquery/jquery-1.8.3.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://m.the3ctv.com/wap/css/common.css">
<title>播放</title>
<style type="text/css">/*控制条的样式*/
.video_play_main_div{background-color:#000000;width:100%;height:100%;}
.video_play_main_div .header{height:45px;}
.video_play_main_div .header a:nth-child(1){display: block;float: left;}
.video_play_main_div .header a:nth-child(1) img{height: 20px;margin-top: 12.5px;margin-left: 12.5px;}
.video_play_main_div .header a:nth-child(2){display: block;float: right;}
.video_play_main_div .header a:nth-child(2) img{height: 35px;margin-top: 5px;margin-right: 7px;}
.video_play_main_div .play_video{width:100%;position:absolute;top:50%;}
.video_play_main_div .play_video .preview{display:none;top: 50%;position: relative;height: 20px;text-align: center;background-color: white;border-radius: 20px;width: auto;}
.video_play_main_div .replay_name{color: white;position: absolute;bottom: 0px;margin-bottom: 20%;width: 100%;text-align: center;}
.the3ctv_video_control{width:100%;position:absolute;top: 61%;z-index: 3;background-color: black;height: 32px;}
.the3ctv_video_control a:nth-child(1){position: relative;float: left;}
.the3ctv_video_control a:nth-child(1) img{width: 25px;margin-left: 10px;}
.the3ctv_video_control em{float:left;color:white;margin-top:4px;}
.the3ctv_video_control em i:nth-child(1){}
.the3ctv_video_control em i:nth-child(2){color:#b4b4b4;}
.the3ctv_video_control span{display: block;height: 4px;width: 52%;margin-left: 2%;background-color: #505050;border-radius: 4px;margin-top: 11px;float:left;}
.the3ctv_video_control span b:nth-child(1){z-index:1;float:left;position:relative;width: 0%;background-color: #b4b4b4;display: block;height: 100%;border-radius: 4px;}
.the3ctv_video_control span b:nth-child(2){z-index:2;position:relative;float: left;width: 8px;height: 8px;background-color: white;border-radius: 8px;margin-top: -2px;margin-left: -8px;}
.the3ctv_video_control span b:nth-child(3){position: relative;background-color: white;display: block;height: 4px;border-radius: 4px;}
.the3ctv_video_control u{float:left;}
.the3ctv_video_control u img{display: block;width: 25px;margin-left: 5px;}
.trump-control-bottom,.trump-control-bottom-flow{display:none;}

video::-webkit-media-controls-enclosure {
    /*禁用播放器控制栏的样式*/
    /*display: none !important;*/
}

</style>
<script type="text/javascript">
var flag = false;
     var initProgressBar = function(){        //进度条相关操作
         var main_div = $("#wap_video_play_main_div");
         var video = $("video",main_div);
         var timeDrag = false;   /* Drag status */
         $("span[name='progress']",main_div).mousedown(function(e) {     //进度条的按下操作
            timeDrag = true; 
            updatebar(e.pageX);
         });
         $(document).mouseup(function(e) {               //松开
            if(timeDrag) {
               timeDrag = false;
               updatebar(e.pageX);
            }
         });
         $(document).mousemove(function(e) {  //鼠标移动事件
            if(timeDrag) {
               updatebar(e.pageX);
            }
         });

         //update Progress Bar control
         var updatebar = function(x) {  //更新时间与播放条进度
            var progress = $("span[name='progress']",main_div);
            var maxduration = video[0].duration; //Video duraiton
            var position = x - progress.offset().left; //Click pos
            var percentage = 100 * position / progress.width();
            //Check within range
            if(percentage > 100) {
               percentage = 100;
            }
            if(percentage < 0) {
               percentage = 0;
            }
            //Update progress bar and video currenttime
            $("span b:eq(0)",main_div).css('width', percentage+'%');
            video[0].currentTime = maxduration * percentage / 100;
            if(percentage==100){
                $("a[name='pause'] img",main_div).attr("src","F://pause.png")
            }
         };
         $('u img',main_div).unbind().bind('click', function() {             //控制视频全屏与退出全屏
           //For Webkit
           video[0].webkitEnterFullscreen();

           //For Firefox
           video[0].mozRequestFullScreen();
           video[0].controls=false;
           return false;
        });
     }
    var initTimeLength = function(timeLength){             //根据秒数格式化时间
        timeLength = parseInt(timeLength);
        var second = timeLength%60;
        var minute = (timeLength-second)/60;
        return (minute<10?"0"+minute:minute)+":"+(second<10?"0"+second:second);
    }
    var initVideo = function(player){
            flag = true;
            var main_div = $("#wap_video_play_main_div");
        main_div.on("click","a[name='pause']",function(){    //暂停   继续
                var video = $("video",main_div);
                video.css("top","0px")
                video.css("top","50%")
                if(video[0].paused) {
                    video[0].play();
            $("img",$(this)).attr("src","F://playing.png")
                }else {
                     video[0].pause();
                     $("img",$(this)).attr("src","F://pause.png")
                }
                return false;
            });
            $("video",main_div).on('loadedmetadata', function() {       //获取全部视频长度
                var video = $("video",main_div);
               $("i:eq(1)",main_div).html(initTimeLength(video[0].duration));
            });
            $("video",main_div).on('timeupdate', function() {           //实时更新播放进度条和时间
                var video = $("video",main_div);
                var currentPos = video[0].currentTime; //Get currenttime    //当前时间
                var maxduration = video[0].duration; //Get video duration   //总时间
                var percentage = 100 * currentPos / maxduration; //in %
                $("i:eq(0)",main_div).html(initTimeLength(video[0].currentTime));
                $("span b:eq(0)",main_div).css("width",percentage+"%")
                $("i:eq(1)",main_div).html(initTimeLength(video[0].duration));
                if(currentPos==maxduration){
                    $("a[name='pause'] img",main_div).attr("src","F://pause.png")
                }
            });
            //$("video",main_div)[0].controls=false;
            //$("video",main_div).removeAttr("controls");
            //$("video",main_div).attr("controls",null);           //隐藏控制条
            var startBuffer = function() {                       //预加载视频的
                var video = $("video",main_div);
               var maxduration = video[0].duration;
               var currentBuffer = video[0].buffered.end(0);
               var percentage = 100 * currentBuffer / maxduration;
               $("span b:eq(2)").css('width', percentage+'%');

               if(currentBuffer < maxduration) {
                  setTimeout(startBuffer, 500);
               }
            };
//          setTimeout(startBuffer, 500);
            initProgressBar();
    }
    var setControl = function(){
        initVideo();
//      $("#wap_video_play_main_div video").removeAttr("controls");
//      $(".trump-control-bottom,.trump-control-bottom-flow").hide();
//      $("#trump_main_unique_1 div[data-resize-module='bottom']").closest("div").hide();
    }
    $(function(){
        var main_div = $("#wap_video_play_main_div");
        main_div.height($(window).height());
        var height = ($(window).width()/16)*9;

        $("video",main_div).height(height).css("margin-top",-(height/2))


        setControl()

    });
</script>
</head>
<body>
    <div class="video_play_main_div" id="wap_video_play_main_div">

        <video controls="controls" autobuffer oncontextmenu="return false;" preload="none" x-webkit-airplay="true" webkit-playsinline="true" id="video_id_1464329192793" width="100%" style="z-index: 1; overflow: hidden; box-sizing: border-box; position: absolute; left: 0px; top: 50%;">
            <source src="http://200004500.vod.myqcloud.com/200004500_44e60aba1da111e689690f47f5e05cec.f30.mp4" type="video/mp4">
        </video>
        <div class="the3ctv_video_control">
            <a name="pause">
                <img src="F://pause.png"/>
            </a>
            <em><i name="time">00:00</i>&nbsp;|&nbsp;<i>01:21</i></em>
            <span name="progress">
                <b></b>
                <b></b>
                <b></b>
            </span>
            <u><img alt="" src="http://m.the3ctv.com/wap/images/video/fullScreen.png"/></u>
        </div> 
    </div>
</body>
</html>